<template>
  <view class="container">
    <!-- 功能列表 -->
    <view class="function-list">
      <!-- 角色切换 -->
      <view class="function-item" @click="handleRoleSwitchClick">
        <view class="icon-wrapper blue">
          <uni-icons type="contact" size="24" color="#fff" />
        </view>
        <text class="function-name">角色选择</text>
        <uni-icons type="right" size="18" color="#999" class="arrow" />
      </view>

      <!-- 信息采集计划审批记录 -->
      <view class="function-item" @click="navigateToApprovalRecords">
        <view class="icon-wrapper orange">
          <uni-icons type="file-text" size="24" color="#fff" />
        </view>
        <text class="function-name">信息采集计划审批记录</text>
        <uni-icons type="right" size="18" color="#999" class="arrow" />
      </view>

      <!-- 自主更新审批记录 -->
      <view class="function-item" @click="navigateToSelfUpdateRecords">
        <view class="icon-wrapper green">
          <uni-icons type="refresh" size="24" color="#fff" />
        </view>
        <text class="function-name">自主更新审批记录</text>
        <uni-icons type="right" size="18" color="#999" class="arrow" />
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" @click="switchTab('/pages/index/index')">
        <uni-icons type="list" size="22" color="#999" />
        <text class="tab-text">采集批次</text>
      </view>
      <view class="tab-item" @click="switchTab('/pages/personal/personal')">
        <uni-icons type="user" size="22" color="#999" />
        <text class="tab-text">个人信息</text>
      </view>
      <view class="tab-item active" @click="switchTab('/pages/more/more')">
        <uni-icons type="more-filled" size="22" color="#e54d42" />
        <text class="tab-text active">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'

// 页面加载时初始化检查
onLoad(() => {
  console.log('更多功能页面加载完成，角色切换功能就绪')
})

// 修复角色切换点击事件 - 修正页面路径
const handleRoleSwitchClick = () => {
  try {
    console.log('角色切换被点击，准备导航到角色选择页面')
    // 修正页面路径，确保与实际文件位置一致
    uni.navigateTo({
      url: '/pages/more/role-switch', 
      success: () => {
        console.log('导航到角色切换页面成功')
      },
      fail: (err) => {
        console.error('导航到角色切换页面失败:', err)
        // 显示错误提示给用户
        uni.showToast({
          title: '打开角色切换失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  } catch (error) {
    console.error('角色切换点击事件处理出错:', error)
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none',
      duration: 2000
    })
  }
}

// 导航到信息采集计划审批记录页面
const navigateToApprovalRecords = () => {
  uni.navigateTo({
    url: '/pages/more/approval-records'
  })
}

// 导航到自主更新审批记录页面
const navigateToSelfUpdateRecords = () => {
  uni.navigateTo({
    url: '/pages/more/self-update-records'
  })
}

// 切换Tab
const switchTab = (url) => {
  uni.switchTab({
    url: url
  })
}
</script>

<style scoped>
/* 保持原有样式不变 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.right-actions {
  display: flex;
  align-items: center;
}

.icon {
  margin-left: 16px;
}

.separator {
  width: 1px;
  height: 16px;
  background-color: #eee;
  margin: 0 8px;
}

.function-list {
  flex: 1;
  padding-top: 10px;
  background-color: #f5f5f5;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background-color: #fff;
  margin-bottom: 1px;
  /* 增加点击反馈效果 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.function-item:active {
  background-color: #f9f9f9;
}

.icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.blue {
  background-color: #409eff;
}

.orange {
  background-color: #ff7d00;
}

.green {
  background-color: #00b42a;
}

.function-name {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.arrow {
  opacity: 0.5;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.tab-item.active .tab-text {
  color: #e54d42;
  font-weight: 500;
}

.tab-text.active {
  color: #e54d42;
}
</style>